<template>
	<view class="content">
		<!-- 头部开始 -->
		<view class="header" :style='"height: "+navH+"rpx;"'>
			<navigator class="header-content" :url="'/pages/goods_search/goods_search'">
				<image src="../../static/images/logo.png" mode="" class="logo"></image>
				<u-search placeholder="搜索商品" disabled="false" :show-action="false" class="seach"></u-search>
			</navigator>
		</view> 
		<!-- 头部结束 -->
		<!-- banner01开始 -->
		<view class="banner01">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#ffffff"
				indicator-active-color="#ffffff"
				:circular="true"
			>
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item.pic" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- banner01结束 -->
		<!-- 导航页面开始 -->
		<view class="nav">
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item,index) in navData" :key="index" >
					<navigator :url="item.url" class="grid-item" :open-type="item.type">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</navigator>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 导航页面结束 -->
		<!-- 简报开始 -->
		<view class="jb">
			<view class="jb_pic">
				<image src="../../static/images/jb-pic01.png" mode=""></image>
			</view>
			<view class="jb_swiper">
				<swiper :circular="true" :disable-touch="true" :vertical="true" :autoplay="true" :interval="2500" :duration="500">
					<swiper-item v-for="(item,index) in roll" :key="index">
						<navigator :url="item.url" class="swiper-item">
							<view class="jb_text">
								<text class="new" v-if="item.id%2==0">最新</text>
								<text class="title">{{item.info}}</text>
							</view>
							<view class="jb-icon-right"><text class="iconfont icon-jiantou icon01"></text></view>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 简报结束 -->
		<!-- 广告开始 -->
		<view class="ad">
			<navigator url="" class="left">
				<image src="../../static/images/ad01.jpg" mode=""></image>
				<view class="text">
					<text class="name">一起来拼团</text>
					<text class="info">优惠多多</text>
				</view>
			</navigator>
			<view class="right">
				<navigator url="" class="list">
					<image src="../../static/images/ad02.jpg" mode=""></image>
					<view class="text">
						<text class="name">秒杀专区</text>
						<text class="info">新能源汽车火热销售</text>
					</view>
				</navigator>
				<navigator url="" class="list">
					<image src="../../static/images/ad03.jpg" mode=""></image>
					<view class="text">
						<text class="name">砍价活动</text>
						<text class="info">呼朋唤友来砍价~~~</text>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 广告结束 -->
		<!-- type01开始 -->
		<view class="type01">
			<wrapper 
			title="快速选择"
			content="上百种商品分类任您选择"
			url="/pages/goods_cate/goods_cate"
			></wrapper>
			<view class="type01-scroll">
				<scroll-view scroll-x class="type01-scroll-x">
					<navigator :url="'/pages/goods_list/goods_list?sid='+item.children[0].id+'&cid='+item.id" v-for="(item,index) in productList" class="type01-scroll-item" :key="index">
						<view class="img"><image :src="item.children[0].pic" mode=""></image></view>
						<view class="info">{{item.children[0].cate_name}}</view>
					</navigator>
				</scroll-view>
			</view>
		</view>
		<!-- type01结束 -->
		<!-- type02开始 -->
		<view class="type02">
			<wrapper
			title="精品推荐"
			content="诚意推荐品质商品"
			url="/pages/goods_cate/goods_cate"
			></wrapper>
			<view class="type02-swiper">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					indicator-color="rgba(252,65,65,0.3)"
					indicator-active-color="#fc4141"
					:circular="true">
					<swiper-item v-for="(item,index) in type02Data.banner" :key="index">
						<view class="swiper-item">
							<navigator :url="item.link"> 
								<image :src="item.img" class="type02-swiper-img" mode=""></image>
							</navigator>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<goodslist :list="type02Data.list"></goodslist>
		</view>
		<!-- type02结束 -->
		<!-- type03开始 -->
		<view class="type03">
			<view class="type03-header">
				<view class="type03-header-title">
					<view class="type03-header-title-left">
						<text>热门榜单</text>
						根据销量、搜索、好评等综合得出
					</view>
					<navigator open-type="switchTab" url="/pages/goods_cate/goods_cate" class="type03-header-title-a">更多<text class="iconfont icon-jiantou"></text></navigator>
				</view>
			</view>
			<view class="type03-content">
				<navigator class="type03-content-item" :url="'/pages/goods_detail/goods_detail?id='+item.id" v-for="(item,index) in type03Data.list" :key="index">
					<view class="type03-content-item-pic">
						<image class="img01" :src="item.image" mode=""></image>
						<image class="jiangpai" :src="index==0?'../../static/images/one.png':index==1?'../../static/images/two.png':'../../static/images/three.png'" mode=""></image>
					</view>
					<view class="type03-content-item-text">{{item.store_name}}</view>
					<view class="type03-content-item-money">￥<text>{{item.price}}</text></view>
				</navigator>
			</view>
		</view>
		<!-- type03结束 -->
		<!-- type04开始 -->
		<view class="type04">
			<wrapper
			title="首发新品"
			content="多个优质商品最新上架"
			:ifnew="true"
			:border-top="false"
			url="/pages/goods_cate/goods_cate"
			></wrapper>
			<view class="type04-scroll">
				<scroll-view scroll-x="true" class="type04-scroll-x">
					<navigator :url="'/pages/goods_detail/goods_detail?id='+item.id" class="type04-scroll-item" v-for="(item,index) in type04Data.list" :key="index">
						<view class="img01"><image :src="item.image" mode=""></image></view>
						<view class="info">{{item.store_name}}</view>
						<view class="money">￥{{item.price}}</view>
					</navigator>
				</scroll-view>
			</view>
		</view>
		<!-- type04结束 -->
		<!-- type05开始 -->
		<view class="type05">
			<wrapper
			title="促销单品"
			content="库存商品优惠促销活动"
			url="/pages/goods_cate/goods_cate"
			></wrapper>
			<promotion-goods :list="type05Data.list"></promotion-goods>
		</view>
		<!-- type05结束 -->
		<!-- 侧边fixed开始 -->
		<home></home>
		<!-- 侧边fixed结束 -->
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "../../api/api.js";
	const app = getApp();
	export default {
		data() {
			return {
				title: 'Hello',
				banner:[],
				roll:[],
				productList:[],
				type02Data:{},
				type03Data:{},
				type04Data:{},
				type05Data:{},
				navData:[{img:"../../static/images/nav01.png",url:"/pages/goods_cate/goods_cate",name:"商品分类",type:"switchTab"},
						 {img:"../../static/images/nav02.png",url:"/pages/pack/user_get_coupon/user_get_coupon",name:"领优惠券",type:"navigate"},
						 {img:"../../static/images/nav04.png",url:"/pages/pack/user_sign/user_sign",name:"我要签到",type:"navigate"},
						 {img:"../../static/images/nav05.png",url:"/pages/pack/user_collection/user_collection",name:"我的收藏",type:"navigate"}],
				navH:"",
			}
		},
		onReady() {
			const that = this;
			this.navH = app.globalData.navHeight;
			api.index.getIndex().then((data)=>{
				console.log("data",data)
				let index = data.index;
				let category = data.category;
				let groom1 = data.groom1;
				let groom2 = data.groom2;
				let groom3 = data.groom3;
				let groom4 = data.groom4;
				if(index.data.status == 200){
					let d = index.data.data;
					that.banner = d.banner;
					that.roll = d.roll;
					// that.navData = d.menus;
				}
				if(category.data.status == 200){
					let d = category.data.data;
					that.productList = d;
				}
				if(groom1.data.status == 200){
					let d = groom1.data.data;
					that.type02Data.banner = d.banner;
					that.type02Data.list = d.list.slice(0,5);
				}
				if(groom2.data.status == 200){
					let d = groom2.data.data;
					that.type03Data.banner = d.banner;
					that.type03Data.list = d.list.slice(0,3);
				}
				if(groom3.data.status == 200){
					let d = groom3.data.data;
					that.type04Data.banner = d.banner;
					that.type04Data.list = d.list.slice(0,6);
				}
				if(groom4.data.status == 200){
					let d = groom4.data.data;
					that.type05Data.banner = d.banner;
					that.type05Data.list = d.list.slice(0,3);
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
	image{
		width: 100%;
		height: 100%;
		display: block;
	}
	view {
		box-sizing: border-box;
	}
	.content {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	.header{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}
	/* .header-placeholder{
		height: var(--status-bar-height);
		width: 100%;
	} */
	.header-content{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.logo{
		width: 127rpx;
		height: 45rpx;
		display: block;
		margin-left: 30rpx;
	}
	.seach{
		width: 360rpx;
		height: 64rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #bbb;
		margin-left: 28rpx;
	}
	.banner01{
		width: 100%;
		height: 375rpx;
		position: relative;
		margin-top: calc(var(--status-bar-height) + 100rpx);
	}
	.banner01 swiper,.banner01 .swiper-item,.banner01 .swiper-item image{
		width: 100%;
		height: 100%;
	}
	.content .banner01 .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom:5rpx;}
	.content .banner01 .wx-swiper-dot{width:7rpx;height:7rpx;border-radius:50%; opacity: 0.6;}
	.content .banner01 .wx-swiper-dot-active{width:20rpx;border-radius:5rpx; opacity: 1;}
	.nav{
		width: 100%;
	}
	.nav u-grid-item{
		margin-bottom: 35rpx;
	}
	.nav .grid-item{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.nav .grid-item image{
		width: 90rpx;
		height: 90rpx;
	}
	.nav .grid-item text{
		text-align: center;
		font-size: 26rpx;
	}
	.jb{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 77rpx;
		border-top: 1rpx solid #f4f4f4;
		padding: 0 30rpx;
		box-shadow: 0 10rpx 30rpx #f5f5f5;
		background-color: #FFFFFF;
	}
	.jb_pic{
		width: 124rpx;
		height: 28rpx;
		border-right: 1rpx solid #ddd;
		padding-right: 23rpx;
		box-sizing: content-box;
	}
	.jb_pic image{
		width: 100%;
		height: 100%;
	}
	.jb_swiper{
		width: 523rpx;
		height: 100%;
		line-height: 77rpx;
		overflow: hidden;
	}
	.jb_swiper swiper,.jb_swiper swiper-item,.jb_swiper .swiper-item{
		width: 100%;
		height: 100%;
	}
	.jb_swiper .swiper-item{
		display: flex;
		align-items: center;
	}
	.jb_text{
		width: 480rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.jb_text .new{
		font-size: 20rpx;
		color: #ff4c48;
		width: 64rpx;
		height: 30rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 28rpx;
		border: 2rpx solid #ff4947;
		box-sizing: border-box;
	}
	.jb_text .title{
		width: 397rpx;
		font-size: 24rpx;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.jb-icon-right{
	}
	.icon01{
		font-size: 28rpx;
		color: #888;
		display: block;
	}
	.ad{
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.ad .left{
		width: 260rpx;
		height: 260rpx;
		position: relative;
		display: block;
	}
	.ad .text{
		position: absolute;
		top: 37rpx;
		left: 22rpx;
		display: flex;
		flex-direction: column;
	}
	.ad .text .name{
		font-size: 30rpx;
		color: #fff;
	}
	.ad .text .info{
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-top: 5rpx;
	}
	.ad .right{
		height: 260rpx;
		width: 416rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
	}
	.ad .right .list{
		width: 100%;
		height: 124rpx;
		position: relative;
	}
	.type01-scroll{
		width: 750rpx;
		white-space: nowrap;
		margin-top: 38rpx;
		padding: 0 30rpx 37rpx 30rpx;
		overflow: hidden;
	}
	.type01-scroll-x{
		width: auto;
		overflow: hidden;
	}
	.type01-scroll-item{
		width: 180rpx;
		display: inline-block;
		/* flex-direction: column;
		align-items: center; */
		margin-right: 19rpx;
		border-bottom: 4rpx solid #47b479;
		box-shadow: 0 40rpx 30rpx -10rpx #eee;
	}
	.type01-scroll-item:nth-child(3n-1){
		border-bottom: 4rpx solid #579afe;
	}
	.type01-scroll-item:nth-child(3n){
		border-bottom: 4rpx solid #ff6960;
	}
	.type01-scroll-item .img{
		width: 100%;
		height: 180rpx;
	}
	.type01-scroll-item .info{
		width: 100%;
		font-size: 24rpx;
		color: #282828;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #f5f5f5;
		border-bottom: 0;
		border-top: 0;
		padding: 0 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.type02-swiper{
		width: 690rpx;
		height: 300rpx;
		margin: 28rpx auto 0 auto;
	}
	.content .type02 .type02-swiper .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom:-8rpx;}
	.content .type02 .type02-swiper .wx-swiper-dot{width:7rpx;height:7rpx;border-radius:50%;}
	.content .type02 .type02-swiper .wx-swiper-dot-active{width:20rpx;border-radius:5rpx;}
	.type02 .type02-swiper swiper{
		position: relative;
	}
	.content .type02 .type02-swiper swiper,.type02 .type02-swiper swiper swiper-item,.type02 .type02-swiper swiper swiper-item .swiper-item,.type02 .type02-swiper swiper swiper-item .swiper-item navigator{
		width: 100%;
		height: 100%;
	}
	.type02-swiper-img{
		width: 100%;
		height: 260rpx;
	}
	.type03-header{
		width: 750rpx;
		height: 215rpx;
		background-image: url("../../static/images/type03-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #fff;
		margin-top: 15rpx;
	}
	.type03-header-title{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 87rpx;
	}
	.type03-header-title-left{
		width: 575rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.type03-header-title-left text{
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}
	.type03-header-title-a{
		font-size: 26rpx;
		height: auto;
		width: auto;
		display: block;
	} 
	.type03-header-title-a text{
		font-size: 25rpx;
		vertical-align: 2rpx;
		margin-left: 10rpx;
	}
	.type03-content{
		width: 690rpx;
		height: 330rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: -128rpx auto 0 auto;
		padding: 0 22rpx;
		box-sizing: border-box;
		box-shadow: 0 0 30rpx -10rpx #aaa;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.type03-content-item{
		width: 200rpx;
		height: auto;
		display: block;
	}
	.type03-content-item-pic{
		/* width: 100%; */
		height: 200rpx;
		position: relative;
	}
	.type03-content-item-pic .img01{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.type03-content-item-pic .jiangpai{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		position: absolute;
		top: 7rpx;
		left: 7rpx;
	}
	.type03-content-item-text{
		font-size: 26rpx;
		color: #282828;
		margin-top: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.type03-content-item-money{
		font-size: 20rpx;
		font-weight: bold;
		margin-top: 4rpx;
		color: #fc4141!important;
	}
	.type03-content-item-money text{
		font-size: 28rpx;
	}
	.type04-scroll{
		width: 750rpx;
		white-space: nowrap;
		padding: 0 30rpx;
		margin: 35rpx 0 42rpx 0;
	}
	.type04-scroll-x{
		width: auto;
		overflow: hidden;
	}
	.type04-scroll-item{
		display: inline-block;
		width: 240rpx;
		margin-right: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 12rpx;
	}
	.type04-scroll-item .img01{
		width: 100%;
		height: 240rpx;
		position: relative;
	}
	.type04-scroll-item .img01 img{
		width: 100%;
		height: 100%;
		border-radius: 12rpx 12rpx 0 0;
	}
	.type04-scroll-item .info{
		font-size: 28rpx;
		color: #333;
		text-align: center;
		padding: 19rpx 10rpx 0 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.type04-scroll-item .money{
		padding: 0 10rpx 18rpx 10rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: bold;
		color: #fc4141!important;
		align-items: center;
		justify-content: space-between;
		display: flex;
		flex-wrap: wrap;
	}
</style>